<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="/resources/common/commonTaglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入资源文件 -->
<%@include file="/resources/common/commonJs.jsp" %>
<%@include file="/resources/common/commonCss.jsp" %>
<!-- 图片上传 -->
<link href="${path }/resources/zui-1.6.0/lib/uploader/zui.uploader.min.css" rel="stylesheet">
<script src="${path }/resources/zui-1.6.0/lib/uploader/zui.uploader.min.js"></script>
<title>学生列表</title>
<script type="text/javascript">
//添加学生
function toStudentAdd() {
	
}
//删除学生
function studentDel(id) {
	
}
//学生详情
function detail(id) {
	
}

$(function() {
	//全选/全不选
	$('#quanxuan').click(function() {
		var checkStatus = $(this).attr('checked');
		var $quanxuan = $('input[name="quanxuan"]');
		if (checkStatus) {
			$quanxuan.attr('checked', true);
		} else {
			$quanxuan.attr('checked', false);
		}
	});
	var opts = {
		autoUpload: true,            // 当选择文件后立即自动进行上传操作
	    url: '${path}/user/excelImport',  // 文件上传提交地址
	    file_data_name: 'file',			//定义表单参数
		filters: {						//指定上传文件的类型、大小
			mime_types: [
				{title: 'excel文件', extensions: 'xls,xlsx'}
			],
			max_file_size: '100mb'
		},
		chunk_size: '0',
		multipart_params: {
			randNum: Math.random()
		},
		//加入文件后触发回调
		onFilesAdded: function(file) {
			layer.alert('加入文件后触发回调');
			
		},
		onFileUpload: function(file) {
			layer.alert('上传成功1111111111111')
		},
		//当某一个文件上传完成后回调
		onFileUploaded: function(file, responseObject) {
			alert('上传成功!');
			var jsonObj = JSON.parse(responseObject.response);
			if (jsonObj.status == 'error') {
				layer.alert('选择Excel文件格式或内容出错!');
			} else if (jsonObj.status == 'success') {
				layer.alert('Excel文件上传成功!');
			} else {
				layer.alert('nothing');
			}
		}
	};
	$('#uploaderExcel').uploader(opts);
	
	$('.uploader-btn-browse').next('div').remove();
	
})
</script>
</head>
<body style="margin: 5px 5px;">
<!-- 条件参数查询start -->
<form action="${path }/user/studentList" method="post" id="searchForm">
	<input type="hidden" name="pageNumber" value="${number }"/>
	<input type="hidden" name="pageSize" value="${size }"/>
	<!-- 实体对象查询参数 -->
	<table style="margin-top: 20px;margin-bottom: 25px; width: 100%">
		<tbody>
		<tr>
			<td>姓名</td>
			<td><input type="text" name="name" value="${searchVal.name }" class="form-control" style="width: 220px;"/></td>
			<td>性别</td>
			<td>
				<select name="status" class="chosen-select form-control" style="width: 120px;">
					<option value="-1">请选择</option>
					<option value="1">男</option>
					<option value="2">女</option>
				</select>
			</td>
			<td>学号</td>
			<td><input type="text" name="ip" value="${searchVal.userNo }" class="form-control" style="width: 120px;"/></td>
			<td>
				<button class="btn btn-primary" onclick="searchSiteList()">查询</button>
				<button class="btn btn-primary">重置</button>
			</td>
		</tr>
		</tbody>
	</table>
</form>
<!-- 条件参数查询end -->
<!-- 其他操作按钮start -->
<div>
	<!-- <button onclick="toStudentAdd()" class="btn btn-primary" style="margin-left: 5px">添加学生</button>
	<button onclick="batchDel()" class="btn btn-primary">批量删除</button> -->
	<div id="uploaderExcel" class="uploader" style="float: left;">
	  <button type="button" class="btn btn-primary uploader-btn-browse"><i class="icon icon-cloud-upload"></i>导入excel</button>
	</div>
</div>
<!-- 其他操作按钮end -->
<!-- 数据列表的显示start -->
<div class="listDataTableStyle">
	<table cellpadding="0" cellspacing="0" width="100%">
		<thead>
		<tr>
			<th><input type="checkbox" id="quanxuan"/></th>
			<th>序号</th>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>准考证号</th>
			<th>班级</th>
			<th>年级</th>
			<th>学校</th>
			<th>考场</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<c:if test="${empty page.content }">
			<tr><td colspan="12">没有学生信息</td></tr>
		</c:if>
		<c:if test="${!empty page.content }">
		<c:forEach items="${page.content }" var="data" varStatus="index">
		<tr>
			<td><input type="checkbox" name="quanxuan"/><input type="hidden" value="${data.id }"/></td>
			<td>${index.index + 1}</td>
			<td>${data.userNo }</td>
			<td>${data.name }</td>
			<td>${data.sex eq '0' ? '男' : '女' }</td>
			<td>${data.examineeNumber }</td>
			<td>${data.studentClass.className }</td>
			<td>${data.studentClass.gradeName }</td>
			<td>${data.studentClass.schoolName }</td>
			<td>${data.examPlace.examPlaceName }</td>
			<td>
				<a href="javascript:;" class="icon-minus-sign" onclick="studentDel('${data.id}')">删除</a>&nbsp;
				<a href="javascript:;" class="icon-info-sign" onclick="detail('${data.id}')">查看</a>
			</td>
		</tr>
		</c:forEach>
		</c:if>
		</tbody>
	</table>
</div>
<!-- 数据列表的显示end -->
<!-- 分页start -->	
<table width="100%">
	<tr>
		<td width="20%">
			<div class="pagin" style="margin-top: 0px !important;">
				<div style="font-size: 14px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif">共<i style="color: blue;">${page.totalElements }</i>条记录，当前第&nbsp;<i style="color: blue;">${page.number+1 }&nbsp;</i>页</div>
			</div>
		</td>
		<td>	
			<div id="Pagination" class="pagination" style="float:right;margin-right:20px;">
			<script type="text/javascript">
					$(function(){
						//获取起始页	 
					  	$("#Pagination").pagination(${page.totalElements}, {//总页数
						  num_edge_entries : 2,//分页页码段右的页码个数
						  num_display_entries : 5,//分页页码段右的页码个数
						  callback : pageselectCallback,//回调函数
						  current_page : ${page.number},//当前页
						  items_per_page :'${page.size}'//每页多少条
					  	});
					});
					
					//分页回调函数
					function pageselectCallback(start, jq){
						$('input[name="pageNumber"]').val(start+1);
						search(false);
					}
					//查询方法
				    function search(resetPageNum){
				    	if(resetPageNum){
					        $('input[name="pageNumber"]').val(0);//重置分页参数,由于分页时也调用此方法，所以增加判断
						}
				        $('#searchForm').submit();
				    }
				    //重置
				    function resetSform(){
						location.href = '#';
				    } 
				</script>
		    </div>
		</td> 
	</tr>
</table>
<!-- 分页end -->
</body>
</html>